<template>
  <div style="display: flex; justify-content: end">
    <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="props.pageNum"
      :page-sizes="[3, 5, 10]" v-model:page-size="props.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
  </div>
</template>

<script setup>
const props = defineProps({ pageNum: Number, pageSize: Number, total: Number });
const emit = defineEmits(["update:pageNum", "update:pageSize", "initData"]);
const pageSize = props.pageSize;
const sizeChange = (val) => {
  emit("update:pageSize", val);
  emit("initData");
};
const currentChange = (val) => {
  emit("update:pageNum", val);
  emit("initData");
};
</script>

<style scoped></style>
